import {Component} from 'react';

import emitter from '../event-emitter' ;

export default class CartItem extends Component {
    constructor(props){
        super();
        this.state = {
            // 将 props 中的 product 展开
            // ...props.product
            id: props.product.id ,
            name: props.product.name ,
            price: props.product.price ,
            number: props.product.number 
        }
        // 将通过 propts 传递而来的 update 函数保存到组件自身的属性中
        this.update = props.update ;
    }
    reduce = async ()=>{
        console.log( this.state.number ); // 原来的数值
        // 调用 setState 更改当前组件的状态
        await this.setState({
            number: this.state.number - 1 
        });
        console.log( this.state.number ); // 新的数值
        this.notify( this.state.number ); // 传递新的数值
    }
    increase = ()=>{
        // 这里需要将 string 值转换为 number 值
        const num = this.state.number | 0 ; // 原来的数值
        // 调用 setState 更改当前组件的状态
        this.setState({
            number:  num + 1 
        });
        this.notify( num + 1 );
    }
    handleChange = evt => {
        let value = evt.target.value ;
        if( /^\d*$/.test( value ) ) {
            this.setState({
                number: value
            });
            this.notify(value);
        }
    }
    notify = num => {
        // 调用 update 函数更改父组件的状态
        this.update( this.state.id , num ) ;
        // 触发 算账 事件
        emitter.emit( '算账' );
    }
    render(){
        return (
            <div className='item'>
                <span className='name'>{ this.state.name }</span>
                <span className='price'>{ this.state.price }</span>
                <span className='number'>
                    <button onClick={this.reduce}>-</button>
                    <input type="text" value={ this.state.number } onChange={this.handleChange} />
                    <button onClick={this.increase}>+</button>
                </span>
                <span className='subtotal'>{ this.state.price * this.state.number }</span>
            </div>
        );
    }
}